﻿<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"/>
<div id="updateDialog" class="crudDialog">
    <form id="updateForm" method="post" class="form-horizontal">
        <div class="form-group"><label for="username" class="col-sm-2 control-label">帐号</label>
            <div class="col-sm-9"><input type="text" id="username" name="username" class="form-control" maxlength="20"
                                         value="${user.username}" readonly/></div>
        </div>
        <div class="form-group"><label for="realname" class="col-sm-2 control-label">姓名</label>
            <div class="col-sm-9"><input type="text" id="realname" name="realname" class="form-control" maxlength="20"
                                         value="${user.realname}" required="true"/></div>
        </div>
        <div class="form-group"><label for="avatar" class="col-sm-2 control-label">头像</label>
            <div class="col-sm-9"><input type="text" id="avatar" name="avatar" class="form-control"
                                         value="${user.avatar}"/></div>
        </div>
        <div class="form-group"><label for="phone" class="col-sm-2 control-label">电话</label>
            <div class="col-sm-9"><input type="text" id="phone" name="phone" class="form-control" maxlength="20"
                                         value="${user.phone}"/></div>
        </div>
        <div class="form-group"><label for="email" class="col-sm-2 control-label">邮箱</label>
            <div class="col-sm-9"><input type="text" id="email" name="email" class="form-control" maxlength="50"
                                         value="${user.email}"/></div>
        </div>
        <div class="form-group"><label class="col-sm-2 control-label"></label>
            <div class="col-sm-4">
                <div class="radio radio-info radio-inline">
                    <input type="radio" id="sex_1" name="sex" value="1" <c:if test="${user.sex==1}">checked</c:if>>
                    <label for="sex_1"> 男 </label>
                </div>
                <div class="radio radio-info radio-inline">
                    <input type="radio" id="sex_0" name="sex" value="0" <c:if test="${user.sex==0}">checked</c:if>>
                    <label for="sex_0"> 女 </label>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="radio radio-success radio-inline">
                    <input type="radio" id="locked_0" name="locked" value="0"
                           <c:if test="${user.locked==0}">checked</c:if>>
                    <label for="locked_0"> 正常 </label>
                </div>
                <div class="radio radio-inline">
                    <input type="radio" id="locked_1" name="locked" value="1"
                           <c:if test="${user.locked==1}">checked</c:if>>
                    <label for="locked_1"> 锁定 </label>
                </div>
            </div>
        </div>

        <div class="form-group text-right dialog-buttons">
            <div class="col-sm-12">
                <a class="waves-effect waves-button" href="javascript:;" onclick="createSubmit();">保存</a>
                <a class="waves-effect waves-button" href="javascript:;" onclick="updateDialog.close();">取消</a>
            </div>
        </div>
    </form>
</div>
<script>
    function initUploader() {
        //百度上传按钮
        var uploader = WebUploader.create({
            // swf文件路径
            swf: '${basePath}/resources/zheng-admin/plugins/webuploader-0.1.5/Uploader.swf',
            // 文件接收服务端
            method: 'POST',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {
                "id": '#picker',
                "multiple": false
            },
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,
            // 选完文件后，是否自动上传。
            auto: false,
            // 只允许选择图片文件
            accept: {
                title: '图片文件',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        uploader.on('fileQueued', function (file) {
            $.ajax({
                url: '${ZHENG_OSS_QINIUYUN_OSS_POLICY}',
                type: 'GET',
                dataType: 'jsonp',
                jsonp: 'callback',
                success: function (result) {
                    var suffix = get_suffix(file.name);
                    var random_name = random_string();
                    uploader.options.formData.key = result.dir + '/' + random_name + suffix;
                    uploader.options.formData.policy = result.policy;
                    uploader.options.formData.OSSAccessKeyId = result.OSSAccessKeyId;
                    uploader.options.formData.success_action_status = 200;
                    uploader.options.formData.callback = result.callback;
                    uploader.options.formData.signature = result.signature;
                    uploader.options.server = result.action;
                    uploader.upload();
                },
                error: function (msg) {
                    console.log(msg);
                }
            });
        });
        uploader.on('uploadSuccess', function (file, response) {
            $('#avatar').val(response.data.filename).focus();
        });
        uploader.on('uploadError', function (file) {
            console.log('uploadError', file);
        });
    }
    // 根据路径获取后缀
    function get_suffix(filename) {
        var pos = filename.lastIndexOf('.');
        var suffix = '';
        if (pos != -1) {
            suffix = filename.substring(pos);
        }
        return suffix;
    }
    // 随机字符串
    function random_string(len) {
        len = len || 32;
        var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        var maxPos = chars.length;
        var pwd = '';
        for (i = 0; i < len; i++) {
            pwd += chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return pwd;
    }
    function createSubmit() {
        $.ajax({
            type: 'post',
            url: '${basePath}/manage/user/update/${user.userId}',
            data: $('#updateForm').serialize(),
            beforeSend: function () {
                if ($('#username').val() == '') {
                    $('#username').focus();
                    return false;
                }
            },
            success: function (result) {
                if (result.code != 1) {
                    if (result.data instanceof Array) {
                        $.each(result.data, function (index, value) {
                            $.confirm({
                                theme: 'dark',
                                animation: 'rotateX',
                                closeAnimation: 'rotateX',
                                title: false,
                                content: value.errorMsg,
                                buttons: {
                                    confirm: {
                                        text: '确认',
                                        btnClass: 'waves-effect waves-button waves-light'
                                    }
                                }
                            });
                        });
                    } else {
                        $.confirm({
                            theme: 'dark',
                            animation: 'rotateX',
                            closeAnimation: 'rotateX',
                            title: false,
                            content: result.data.errorMsg,
                            buttons: {
                                confirm: {
                                    text: '确认',
                                    btnClass: 'waves-effect waves-button waves-light'
                                }
                            }
                        });
                    }
                } else {
                    updateDialog.close();
                    $table.bootstrapTable('refresh');
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $.confirm({
                    theme: 'dark',
                    animation: 'rotateX',
                    closeAnimation: 'rotateX',
                    title: false,
                    content: textStatus,
                    buttons: {
                        confirm: {
                            text: '确认',
                            btnClass: 'waves-effect waves-button waves-light'
                        }
                    }
                });
            }
        });
    }
</script>